<template>
  <div>
    <h2 class="van-doc-block__title">历史账单</h2>

    <van-cell title="选择月份" is-link :value="date" @click="show = true" />
    <van-calendar v-model="show" type="range" :min-date="minDate" :max-date="maxDate" @confirm="onConfirm" />

    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getLists">
      <van-card
        v-for="item in lists"
        :key="item.billNo"
        @click="todatainfo(item.billNo)"
      >
        <template #price>
          <div>付款金额：￥{{item.payPrice}}</div>
          <div>付款时间：{{formatDate(item.payTime)}}</div>
        </template>
        <template #desc>
          <div>公司名称：{{item.corpName}}</div>
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script>
  import {Toast} from "vant";

  export default {
    name: "enterpriseCarBill",
    data() {
      return {
        query: {
          pageNum: 1,
          pageSize: 10,
          startTime: '',
          endTime: '',
        },
        show: false,
        date: '',
        lists: [],
        loading: false,
        finished: false,
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(),
      };
    },
    methods: {
      onConfirm(date) {
        const [start, end] = date;

        this.query.startTime = this.formatDate(start);
        this.query.endTime = this.formatDate(end);
        this.show = false;
        this.date = this.formatDate(start) + '-' + this.formatDate(end);
        this.query.pageNum = 1

        this.lists = [];
        this.getLists();
      },
      todatainfo(e) {
        this.$router.push({
          name: "enterpriseCarBillDetail",
          query: {
            billNo: e
          }
        });
      },
      getLists() {
        // 异步更新数据
        this.$Api.get("/api/bill/historyBill", this.query).then(res => {
          if (res.data.code == 200) {
            if (res.data.data.reduslt.length > 0) {
              this.lists.push(...res.data.data.reduslt);
              this.query.pageNum++
            } else {
              this.finished = true;
            }
          } else {
            Toast(res.data.message);
          }
          // 加载状态结束
          this.loading = false;
          // 数据全部加载完成
          if (res.data.data.result.length < 10) {
            this.finished = true;
          }
        }).catch(err => {
        });
      },
      formatDate(a) {
        let now = new Date(a);
        let year = now.getFullYear(); //取得4位数的年份
        let month = now.getMonth() + 1; //取得日期中的月份，其中0表示1月，11表示12月
        let date = now.getDate(); //返回日期月份中的天数（1到31）

        return year + "-" + month + "-" + date;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .van-doc-block__title {
    margin: 0;
    padding: 24px 16px 16px;
    color: #09f;
    font-weight: normal;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    border-bottom: 1px solid #09f;
  }
</style>
